<template>
  <div class="w100 h100">
    <div class="topBox">
      <div class="topBox_title d-flex ai-center jc-between">
        <div class="fs-16 fw-600 main-color">充电数据</div>
        <div class="d-flex ai-center">
          <div class="mr-35" style="width: 160px">
            <el-select
              :teleported="false"
              v-model="powerStation"
              placeholder="全部电站"
              suffix-icon="caretBottom"
            >
              <el-option
                v-for="item in powerStation_Options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="d-flex">
            <div
              class="filter_item"
              :class="filter2 == 1 ? 'filter_item_yes' : 'filter_item_no'"
              @click="chooseFilter(1)"
              style="border-radius: 4px 0px 0px 4px"
            >
              今日
            </div>
            <div
              class="filter_item"
              :class="filter2 == 2 ? 'filter_item_yes' : 'filter_item_no'"
              @click="chooseFilter(2)"
              style="border-radius: 0px 4px 4px 0px"
            >
              昨日
            </div>
          </div>
        </div>
      </div>
      <div class="mt-25 d-flex ai-center jc-between">
        <div
          v-for="(item, index) in chargeDetil"
          :key="index"
          class="topBox_item"
          :class="`topBox_item` + index"
        >
          <div class="fs-14 d-flex ai-center">
            {{ item.name }}
            <ft-icon
              v-if="index == 2"
              name="iconfont icon-a-wenhao_huaban1"
              color="#FFF"
              size="14px"
            />
            <ft-icon
              v-if="index == 3"
              name="iconfont icon-a-wenhao_huaban1"
              color="#FFF"
              size="14px"
            />
            <ft-icon
              v-if="index == 4"
              name="iconfont icon-a-wenhao_huaban1"
              color="#FFF"
              size="14px"
            />
          </div>
          <div class="fs-46 mt-15">
            {{ item.value }}
          </div>
        </div>
      </div>
    </div>
    <div class="centerBox mt-20 d-flex ai-center jc-between">
      <div class="centerBox_left">
        <div class="fs-16 fw-600 main-color">待办事项</div>
        <div
          v-if="todoList && todoList.length == 0"
          class="d-flex ai-center jc-center"
          style="flex-direction: column"
        >
          <img src="@/assets/img/homePage/noneData.png" alt="" />
          <div class="fs-14 mt-15 auxiliary-color">暂无待办~</div>
        </div>
        <div
          v-else
          class="mt-15"
          v-for="(item, index) in todoList"
          :key="index"
        >
          <div class="d-flex ai-center jc-between">
            <div class="d-flex ai-center" style="width: 90%">
              <div class="fs-14 fw-600" style="width: 33%">
                {{ item.title }}
              </div>
              <div class="fs-14 line-text-1">{{ item.content }}</div>
            </div>
            <ft-icon name="iconfont icon-z043" color="#B2B2B2" size="18px" />
          </div>
        </div>
      </div>
      <div class="centerBox_center">
        <div class="d-flex ai-center">
          <div class="fs-16 fw-600 main-color">实时状态</div>
          <div
            class="fs-12 ml-8 pl-10 pr-10 pt-4 pb-4"
            style="color: #fff; background: #4dc170; border-radius: 4px"
          >
            已停用 {{ disPower }}
          </div>
        </div>
        <div class="mt-25 d-flex ai-center jc-between">
          <div
            v-for="(item, index) in useList"
            :key="index"
            class="d-flex ai-center"
          >
            <img
              :src="`/src/assets/img/charge/charge${index + 1}.png`"
              alt=""
              style="width: 46px; height: 63px"
            />
            <div class="ml-5 main-color">
              <div class="fs-14">
                {{ item.name }}
              </div>
              <div class="fs-20 mt-10">
                {{ item.number }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="centerBox_right">
        <div class="fs-16 fw-600 main-color">常用功能</div>
        <div class="mt-25 d-flex ai-center jc-around">
          <div
            v-for="(item, index) in commonList"
            :key="index"
            class="d-flex ai-center jc-center"
            style="flex-direction: column"
          >
            <img
              :src="`/src/assets/img/charge/use${index + 1}.png`"
              alt=""
              style="width: 50%; height: 50%"
            />
            <div class="fs-14 mt-15">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox mt-20">
      <div class="topBox_title d-flex ai-center jc-between">
        <div class="fs-16 fw-600 main-color">充电数据</div>
        <div class="d-flex ai-center">
          <div class="mr-35" style="width: 160px">
            <el-select
              :teleported="false"
              v-model="powerStation1"
              placeholder="全部电站"
              suffix-icon="caretBottom"
            >
              <el-option
                v-for="item in powerStation_Options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="d-flex mr-35">
            <div
              class="filter_item1"
              :class="filter3 == 1 ? 'filter_item1_yes' : 'filter_item1_no'"
              @click="chooseFilter1(1)"
              style="border-radius: 4px 0px 0px 4px"
            >
              近30天
            </div>
            <div
              class="filter_item1"
              :class="filter3 == 2 ? 'filter_item1_yes' : 'filter_item1_no'"
              @click="chooseFilter1(2)"
              style="border-radius: 0px 4px 4px 0px"
            >
              近12月
            </div>
          </div>
          <div class="">
            <el-date-picker
              style="width: 205px; border: 1px solid #cdcbcb"
              v-model="times"
              type="daterange"
              value-format="YYYY-MM-DD"
              @change="dateTimeChange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              range-separator="—"
              :teleported="false"
            />
          </div>
        </div>
      </div>
      <div class="topBox_content mt-20 d-flex ai-center jc-between">
        <div
          ref="chartRef"
          style="width: 50%; height: 300px;"
        ></div>
        <div
          ref="chartRef1"
          style="width: 50%; height: 300px;"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useECharts";
import {
  getPowerList,
  getPowerDetil,
  getPowerTodo,
  powerStationdDisable,
  powerStationdList,
  chargeTrendData,
  chargeTrendTimes,
} from "@/api/modules/powerStation";
const powerStation = ref("");
const powerStation1 = ref("");

// 电站列表
const powerStation_Options = ref([]);
// 获取电站列表
const getPowList = () => {
  getPowerList().then((res) => {
    powerStation_Options.value = res.data;
  });
};
// 筛选2-昨天今天
const filter2 = ref(1);
const chooseFilter = (val) => {
  filter2.value = val;
};
// 筛选-近三十天/近12月
const filter3 = ref(1);
const chooseFilter1 = (val) => {
  filter3.value = val;
};
const chargeDetil = ref(null);
// 获取电站数据详情
const getDetil = () => {
  getPowerDetil().then((res) => {
    chargeDetil.value = res.data;
  });
};
// 待办事项列表
const todoList = ref([]);
// 获取电站待办事项列表
const getTodoList = () => {
  getPowerTodo().then((res) => {
    todoList.value = res.data.slice(0, 3);
  });
};
// 停用电站数量
const disPower = ref(null);
const getDisPower = () => {
  powerStationdDisable().then((res) => {
    disPower.value = res.data.number;
  });
};
// 电站使用情况列表
const useList = ref([]);
const getPowerUseList = () => {
  powerStationdList().then((res) => {
    useList.value = res.data;
  });
};
// 常用功能
const commonList = ref([
  { name: "今日订单" },
  { name: "电站统计" },
  { name: "电站管理" },
  { name: "营销活动" },
]);
// 日期筛选
const times = ref([]);
const dateTimeChange = (e) => {
  console.log(e);
};
// 充电趋势
const chartRef = ref();
// 时段分布
const chartRef1 = ref();
// 充电趋势统计图
const chargeTrend = async () => {
  const { data } = await chargeTrendData();
  const myChart = echarts.init(chartRef.value);
  const options = {
    title: {
      text: "充电趋势",
      textStyle: {
        color: "#333333",
        fontSize: 16,
        fontWeight: "400",
      },
    },
    color: ["#00FFF2", "#FF6D6D", "#0099FF"],
    legend: {
      show: true,
      data: [
        { name: "充电电量", icon: "rect" },
        { name: "充电次数", icon: "rect" },
        { name: "订单金额", icon: "rect" },
      ],
      type: "plain",
      orient: "horizontal",
      right: "20px",
      top: '5px',
      align: "left",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    grid: {
      top: "15%",
      bottom: "0%",
      containLabel: true,
      width: "92%",
      left: "20px",
    },
    tooltip: {
      show: true,
      triggerOn: "mousemove",
      trigger: "axis",
    },
    xAxis: {
      show: true,
      boundaryGap: false,
      type: "category",
      data: data.date,
      axisLine:{
        show : false
      },
      splitLine: {
      show: false
    }
    },
    yAxis: {
      show: true,
      type: "value",
      axisLine:{
        show : false
      },
      splitLine: {
      show: false
    }
    },
    series: [
      {
        name: "充电电量",
        data: data.dian,
        type: "line",
        smooth: true,
        normal: {
          linestyle: {
            width: 0,
            color: "#00FFF2",
          },
        },
        showSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00FFF2", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        name: "充电次数",
        data: data.num,
        type: "line",
        smooth: true,
        normal: {
          linestyle: {
            width: 0,
            color: "#FF6D6D",
          },
        },

        showSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FF6D6D", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        name: "订单金额",
        data: data.jin,
        type: "line",
        smooth: true,
        normal: {
          linestyle: {
            width: 0,
            color: "#0099FF",
          },
        },

        showSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#0099FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  useEcharts(myChart, options);
};
// 时段分布统计图
const chargeTimes = async () => {
  const { data } = await chargeTrendTimes();
  const myChart = echarts.init(chartRef1.value);
  const options1 = {
    title: {
      text: "时段分布",
      textStyle: {
        color: "#333333",
        fontSize: 16,
        fontWeight: "400",
      },
    },
    color: ["#00FFF2", "#FF6D6D", "#0099FF"],
    legend: {
      show: true,
      data: [
        { name: "充电电量", icon: "rect" },
        { name: "充电次数", icon: "rect" },
        { name: "订单金额", icon: "rect" },
      ],
      type: "plain",
      orient: "horizontal",
      right: "20px",
      top: '5px',
      align: "left",
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: "#333",
        fontSize: 12,
      },
    },
    grid: {
      top: "15%",
      bottom: "0%",
      containLabel: true,
      width: "92%",
      left: "20px",
    },
    tooltip: {
      show: true,
      triggerOn: "mousemove",
      trigger: "axis",
    },
    xAxis: {
      show: true,
      boundaryGap: false,
      type: "category",
      data: data.date,
      axisLine:{
        show : false
      },
      splitLine: {
      show: false
    }
    },
    yAxis: {
      show: true,
      type: "value",
      axisLine:{
        show : false
      },
      splitLine: {
      show: false
    }
    },
    series: [
      {
        name: "充电电量",
        data: data.dian,
        type: "line",
        smooth: true,
        normal: {
          linestyle: {
            width: 0,
            color: "#00FFF2",
          },
        },
        showSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00FFF2", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        name: "充电次数",
        data: data.num,
        type: "line",
        smooth: true,
        normal: {
          linestyle: {
            width: 0,
            color: "#FF6D6D",
          },
        },

        showSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FF6D6D", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        name: "订单金额",
        data: data.jin,
        type: "line",
        smooth: true,
        normal: {
          linestyle: {
            width: 0,
            color: "#0099FF",
          },
        },

        showSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#0099FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  useEcharts(myChart, options1);
};
onMounted(() => {
  // 获取电站列表
  getPowList();
  // 获取电站数据详情
  getDetil();
  // 获取电站待办事项列表
  getTodoList();
  // 获取电站停用数量
  getDisPower();
  // 获取电站使用情况列表
  getPowerUseList();
  // 获取充电趋势统计图
  chargeTrend();
  // 获取时段分布统计图
  chargeTimes();
});
</script>

<style lang="scss" scoped>
.topBox {
  background-color: #fff;
  padding: 25px 20px 25px 20px;
  border-radius: 4px;
}
.filter_item {
  cursor: pointer;
  height: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  width: 45px;
  &_no {
    border: 1px solid #cdcbcb;
    color: $main-color;
  }
  &_yes {
    border: 1px solid var(--el-color-primary);
    color: #fff;
    background-color: var(--el-color-primary);
  }
}
.filter_item1 {
  cursor: pointer;
  height: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  width: 60px;
  &_no {
    border: 1px solid #cdcbcb;
    color: $main-color;
  }
  &_yes {
    border: 1px solid var(--el-color-primary);
    color: #fff;
    background-color: var(--el-color-primary);
  }
}
.topBox_item {
  height: 135px;
  width: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.topBox_item0 {
  background: url("@/assets/img/charge/bg1.png") no-repeat;
  background-size: 100% 100%;
}
.topBox_item1 {
  background: url("@/assets/img/charge/bg2.png") no-repeat;
  background-size: 100% 100%;
}
.topBox_item2 {
  background: url("@/assets/img/charge/bg3.png") no-repeat;
  background-size: 100% 100%;
}
.topBox_item3 {
  background: url("@/assets/img/charge/bg4.png") no-repeat;
  background-size: 100% 100%;
}
.topBox_item4 {
  background: url("@/assets/img/charge/bg5.png") no-repeat;
  background-size: 100% 100%;
}
.centerBox {
  cursor: pointer;
  &_left {
    width: 25%;
    height: 135px;
    background-color: #fff;
    padding: 25px 20px 25px 20px;
    border-radius: 4px;
    color: $main-color;
  }
  &_center {
    width: 40%;
    height: 135px;
    background-color: #fff;
    padding: 25px 20px 25px 20px;
    border-radius: 4px;
    color: $main-color;
  }
  &_right {
    width: 25%;
    height: 135px;
    background-color: #fff;
    padding: 25px 20px 25px 20px;
    border-radius: 4px;
    color: $main-color;
  }
}
.bottomBox {
  background-color: #fff;
  padding: 25px 20px 25px 20px;
  border-radius: 4px;
}

:deep(.el-select) {
  --el-select-placeholder-color: $main-color;
  font-size: 14px;
  color: $main-color;
}
:deep(.el-select__wrapper) {
  border: 1px solid #cdcbcb;
}
:deep(.el-select__placeholder) {
  font-size: 14px;
  color: $main-color;
}
:deep(.el-select__caret) {
  color: $main-color;
}
:deep(.el-select__wrapper.is-focused) {
  box-shadow: none;
}
:deep(.el-select-dropdown__item.is-selected) {
  color: var(--el-color-primary);
}
:deep(.el-select-dropdown__item.is-hovering) {
  background-color: rgba(245, 109, 28, 0.1) !important;
}
:deep(.el-date-editor .el-range__icon) {
  display: none;
}
:deep(.el-date-editor .el-range__close-icon--hidden) {
  display: none;
}
:deep(.el-range-separator) {
  font-weight: bold;
  color: #666666;
}
:deep(.el-date-table td.start-date .el-date-table-cell__text) {
  background-color: var(--el-color-primary);
}
:deep(.el-date-table td.end-date .el-date-table-cell__text) {
  background-color: var(--el-color-primary);
}
:deep(.el-date-table td.today .el-date-table-cell__text) {
  color: var(--el-color-primary);
}
:deep(.el-date-table td.in-range .el-date-table-cell) {
  background-color: rgba(245, 109, 28, 0.1);
}
:deep(.el-date-range-picker) {
  --el-datepicker-hover-text-color: var(--el-color-primary);
}

.line-text-1 {
  width: 60%;
  overflow: hidden;
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
}
</style>
